<template>
  <div class="page-container data-report-based">
    <div class="f-r a-c j-b">
      <div class="box-title">数据汇聚</div>
      <el-form inline>
        <el-form-item label="统计维度：">
          <el-radio-group v-model="searchParams.type">
            <el-radio :label="1" border>全市总览</el-radio>
            <el-radio :label="2" border>部门详情</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchParams.dept" placeholder="选择部门">
            <el-option
              v-for="item in deptOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="none">
      <div class="f-r j-b f-w">
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="@/assets/data-based/1.png"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">数据标准</span>
              <div class="text-wrapper_13" style="color: #5C95F6">
                <span class="text_49">47</span>
                <span class="text_50">个</span>
              </div>
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="@/assets/line.png"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">今日运行</span>
            <span class="text_56">109个</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="@/assets/data-based/2.png"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">数量模型</span>
              <div class="text-wrapper_13" style="color: #15D2B9">
                <span class="text_49">247</span>
                <span class="text_50">个</span>
              </div>
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="@/assets/line.png"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">已配置质量规则模型</span>
            <span class="text_56">0个</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="@/assets/data-based/3.png"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">检测数据数量</span>
              <div class="text-wrapper_13" style="color: #FFAD2F">
                <span class="text_49">4277</span>
                <span class="text_50">个</span>
              </div>
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="@/assets/line.png"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">检测表数 0个</span>
            <span class="text_55">检测表数 0个</span>
            <span class="text_55">检测表数 0个</span>
            <span class="text_55">检测表数 0个</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="@/assets/data-based/4.png"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">业务指标数量</span>
              <div class="text-wrapper_13" style="color: #FF6E6E">
                <span class="text_49">189,247</span>
                <span class="text_50">个</span>
              </div>
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="@/assets/line.png"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">今日运行</span>
            <span class="text_56">1,809个</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="@/assets/data-based/5.png"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">业务规则数量</span>
              <div class="text-wrapper_13" style="color: #9374FF">
                <span class="text_49">189,247</span>
                <span class="text_50">个</span>
              </div>
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="@/assets/line.png"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">今日运行</span>
            <span class="text_56">1,809个</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="@/assets/data-based/6.png"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">业务场景数量</span>
              <div class="text-wrapper_13" style="color: #FF6820">
                <span class="text_49">189,247</span>
                <span class="text_50">个</span>
              </div>
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="@/assets/line.png"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">正常 109 个</span>
            <span class="text_55">警告 109 个</span>
            <span class="text_55">异常 109 个</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="none" style="margin-top: 30px">
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="f-r a-c">
            <div class="box-title" style="margin-right: 20px">综合质量得分</div>
            <el-select v-model="searchParams.dept" placeholder="按日统计">
              <el-option
                v-for="item in deptOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="radar-box f-c">
            <div style="height: 260px">
              <v-chart autoresize :option="option1" style="width: 100%;height: 100%" />
            </div>
            <div class="chart-sub-title">质量评分</div>
            <div class="chart-value">42.13</div>
            <div class="chart-sub-title">质量评估较差，请尽快处理提高！</div>
            <div class="f-r a-c j-b" style="margin-top: 30px">
              <div class="rate-box f-r a-c j-c f-1">
                <div class="radar-chart-top__rate-name">月同比：</div>
                <div class="radar-chart-top__rate-value">11%</div>
                <div class="icon-up" />
              </div>
              <div class="rate-box f-r a-c j-c f-1">
                <div class="radar-chart-top__rate-name">日环比：</div>
                <div class="radar-chart-top__rate-value">11%</div>
                <div class="icon-down" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="f-r a-c j-e">
            <div class="tags-list f-g f-r j-e a-c">
              <div class="tag tag1">
                <img src="@/assets/data-based/9.png">
                详细评分
              </div>
              <div class="tag tag2">
                <img src="@/assets/data-based/10.png">
                详细评分
              </div>
            </div>
          </div>
          <div style="width: 100%;height: 457px;border: 1px solid #ecf0f8;margin-top: 14px">
            <v-chart autoresize :option="option2" style="width: 100%;height: 100%" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="block_1 f-c" style="height: 233px">
            <div class="section_41 f-r j-b">
              <img
                class="image_7"
                referrerpolicy="no-referrer"
                src="@/assets/data-based/7.png"
              >
              <div class="section_42 f-c j-b">
                <span class="text_48">数据质量作业</span>
                <div class="text-wrapper_13" style="color: #5C95F6">
                  <span class="text_49">47</span>
                  <span class="text_50">个</span>
                </div>
              </div>
            </div>
            <img
              class="image_8"
              referrerpolicy="no-referrer"
              src="@/assets/line.png"
            >
            <div class="text-wrapper_30 f-r j-b">
              <div class="f-r a-c">
                <span class="text_55">成功数</span>
                <span class="text_56">109个</span>
              </div>
              <div class="f-r a-c">
                <span class="text_55">运行数</span>
                <span class="text_56">109个</span>
              </div>
            </div>
            <div class="text-wrapper_30 f-r j-b" style="margin-bottom: 0;margin-top: 0">
              <div class="f-r a-c">
                <span class="text_55">失败数</span>
                <span class="text_56">109个</span>
              </div>
              <div class="f-r a-c">
                <span class="text_55">告警数</span>
                <span class="text_56">109个</span>
              </div>
            </div>
          </div>
          <div class="block_1 f-c" style="height: 233px">
            <div class="section_41 f-r j-b">
              <img
                class="image_7"
                referrerpolicy="no-referrer"
                src="@/assets/data-based/8.png"
              >
              <div class="section_42 f-c j-b">
                <span class="text_48">数据开发作业</span>
                <div class="text-wrapper_13" style="color: #15D2B9">
                  <span class="text_49">247</span>
                  <span class="text_50">个</span>
                </div>
              </div>
            </div>
            <img
              class="image_8"
              style="margin-top: 58px"
              referrerpolicy="no-referrer"
              src="@/assets/line.png"
            >
            <div class="text-wrapper_30 f-r j-b">
              <span class="text_55">检测表数 0个</span>
              <span class="text_55">检测表数 0个</span>
              <span class="text_55">检测表数 0个</span>
              <span class="text_55">检测表数 0个</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
const colors = ['#FFC1BF', '#FFDB85', '#45EFC8', 'rgba(112, 168, 246, 1)']
import * as echarts from 'echarts'
export default {
  name: 'DataReportServe',
  data() {
    return {
      searchParams: {
        type: 1,
        dept: '',
        time: ' '
      },
      deptOptions: [],
      radiovalue1: '1',
      option1: {},
      radiovalue2: '1',

      option2: {},
      categoryList: [
        {
          name: '提供数据部门/区',
          value: 47,
          unit: '个',
          img: '',
          textList: [
            { name: '区', value: '5', unit: '个', color: colors[0] },
            { name: '部门', value: '5', unit: '个', color: colors[3] }
          ],
          today: {
            name: '今日运行',
            value: 139,
            unit: '1'
          }
        }
      ]
    }
  },
  created() {
    this.option1 = this.getOption1()
    this.option2 = this.getOption2()
  },
  methods: {
    getOption1() {
      return {
        title: {
          text: '评分',
          textStyle: {
            color: '#000',
            fontSize: 16
          },
          left: 'center',
          top: 30
        },
        series: [{
          type: 'gauge',
          radius: '100%',
          center: ['center', '80%'],
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          splitNumber: 3,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#FF7474'
            }, {
              offset: 1,
              color: '#FFC1BF'
            }])
          },
          pointer: {
            width: 8,
            itemStyle: {
              color: '#000'
            }
          },
          progress: {
            show: true,
            roundCap: true,
            width: 30
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 30
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: function(value) {
              if (value === 0) {
                return '差'
              } else if (value < 30) {
                return '中'
              } else if (value < 60) {
                return '良'
              } else {
                return '优'
              }
            },
            distance: 20,
            color: '#1A1A1A',
            fontSize: 11
          },
          title: { show: false },
          detail: { show: false },
          data: [{
            value: 80
          }]
        }]
      }
    },
    getOption2() {
      return {
        title: {
          text: '维度',
          textStyle: {
            color: '#000',
            fontSize: 16
          },
          left: 'center',
          top: 30
        },
        radar: {
          radius: '60%',
          center: ['50%', '50%'],
          indicator: [
            { name: '可访问性', max: 100 },
            { name: '完整性', max: 100 },
            { name: '失效性', max: 100 },
            { name: '规范性', max: 100 },
            { name: '一致性', max: 100 },
            { name: '准确性', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            symbol: 'circle',
            data: [
              {
                value: [80, 70, 50, 40, 30],
                name: '1'
              },
              {
                value: [100, 90, 60, 75, 50],
                name: '2'
              },
              {
                value: [20, 45, 33, 99, 50],
                name: '3'
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
.data-report-based{
  .card-box {
    position: relative;
    height: 400px;
    .chart-box {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
    }
  }
  .tags-list {
    .tag {
      width: 130px;
      height: 40px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
    }
    .tag1 {
      background:rgba(41, 220, 201, .1);
    }
    .tag2 {
      background-color: rgba(121, 166, 255, .1);
    }
  }
  .radar-box {
    width: 100%;height: 457px;border: 1px solid #ecf0f8;margin-top: 14px;
    text-align: center;
    .chart-sub-title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      opacity: 0.8;
    }
    .chart-value {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5C95F6;
      margin: 20px 0 30px 0;
    }
  }
  .rate-box {
    width: 100%;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1A1A1A;
    opacity: 0.8;
    margin-bottom: 5px;
    .radar-chart-top__rate-value {
      opacity: 1;
      margin-left: 10px;
      margin-right: 5px;
    }
  }
  .el-radio {
    width: 220px;
    height: 40px;
    margin-right: 20px;
    background: #fff;
  }
  .block_1 {
    background-color: rgba(255, 255, 255, 1);
    width: 491px;
    height: 200px;
    border: 1px solid rgba(236, 240, 248, 1);
  }
  .block_1:nth-of-type(1),
  .block_1:nth-of-type(2),
  .block_1:nth-of-type(3){
    margin-bottom: 40px;
  }
  .section_41 {
    width: 245px;
    height: 74px;
    margin: 38px 0 0 27px;
  }
  .image_7 {
    width: 79px;
    height: 71px;
    margin-top: 3px;
  }
  .section_42 {
    width: 137px;
    height: 70px;
  }
  .text_48 {
    width: 124px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 20px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 20px;
  }
  .text-wrapper_13 {
    width: 135px;
    height: 28px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
    margin: 21px 0 0 2px;
  }
  .text_49 {
    width: 135px;
    height: 28px;
    overflow-wrap: break-word;
    font-size: 30px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
  }
  .text_50 {
    width: 135px;
    height: 28px;
    overflow-wrap: break-word;
    font-size: 18px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
  }
  .section_43 {
    width: 149px;
    height: 47px;
    margin: 36px 0 0 26px;
  }
  .text-wrapper_29 {
    width: 42px;
    height: 40px;
    margin-top: 4px;
  }
  .text_51 {
    width: 42px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }
  .text_52 {
    width: 40px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin: 12px 0 0 2px;
  }
  .group_35 {
    width: 72px;
    height: 47px;
  }
  .image-text_16 {
    width: 72px;
    height: 43px;
  }
  .text-group_11 {
    width: 37px;
    height: 41px;
    margin-top: 2px;
  }
  .text_53 {
    width: 36px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(239, 52, 61, 1);
    font-size: 18px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin-left: 1px;
  }
  .text_54 {
    width: 36px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(41, 202, 176, 1);
    font-size: 18px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin-top: 11px;
  }
  .thumbnail_27 {
    width: 16px;
    height: 20px;
  }
  .thumbnail_28 {
    width: 16px;
    height: 20px;
    margin: 27px 0 0 -16px;
  }
  .image_8 {
    width: 434px;
    height: 2px;
    margin: 27px 0 0 26px;
  }
  .text-wrapper_30 {
    width: 433px;
    height: 17px;
    margin: 20px 0 20px 26px;
  }
  .text_55 {
    height: 17px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }
  .text_56 {
    width: 42px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin-top: 1px;
  }
}
</style>
